<template>
    <div class="password-container">
        <!-- 背景装饰元素 -->
        <div class="bg-decoration"></div>
        <div class="floating-elements"></div>

        <!-- 标题与装饰 -->
        <div class="title-wrapper">
            <h2 class="page-title">修改密码</h2>
            <div class="title-glow"></div>
        </div>

        <van-field v-model="oldPassword" type="password" label="旧密码：" class="input-password" @focus="handleFocus(0)"
            @blur="handleBlur(0)">
        </van-field>

        <van-field v-model="newPassword" type="password" label="新密码：" class="input-password" @focus="handleFocus(1)"
            @blur="handleBlur(1)">
        </van-field>

        <van-field v-model="requstPassword" type="password" label="确认新密码：" class="input-password"
            @focus="handleFocus(2)" @blur="handleBlur(2)">
        </van-field>

        <!-- 提交按钮与粒子效果容器 -->
        <div class="button-container">
            <van-button class="submit-btn" @click="handleSubmit">
                确认修改
                <span class="button-particles"></span>
            </van-button>
        </div>

        <div class="button-container">
            <van-button class="submit-btn" @click="handleBack">
               返回
                <span class="button-particles"></span>
            </van-button>
        </div>

        <!-- 悬浮光效 -->
        <div class="floating-light" :style="{
            left: floatingLightPos.x + 'px',
            top: floatingLightPos.y + 'px',
            opacity: floatingLightOpacity
        }"></div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';

// 密码绑定
const oldPassword = ref('');
const newPassword = ref('');
const requstPassword = ref('');

const { proxy } = getCurrentInstance();
const user = proxy.$user.value;

// 输入框状态管理
const inputStates = reactive({
    focusedIndex: -1
});

// 悬浮光效位置与透明度
const floatingLightPos = reactive({ x: 0, y: 0 });
const floatingLightOpacity = ref(0);

// 处理输入框聚焦
const handleFocus = (index) => {
    inputStates.focusedIndex = index;
    // 聚焦时增强光效
    floatingLightOpacity.value = 0.6;
};

// 处理输入框失焦
const handleBlur = (index) => {
    inputStates.focusedIndex = -1;
    // 失焦时减弱光效
    floatingLightOpacity.value = 0.3;
};

//返回上一页
const handleBack = () => {
    // 返回上级
    proxy.$router.back();
}

// 提交处理
const handleSubmit = async () => {
    // 提交逻辑...
    // 按钮点击特效触发
    const btn = document.querySelector('.submit-btn');
    btn.classList.add('btn-active')
    setTimeout(() => btn.classList.remove('btn-active'), 300);

    if (!oldPassword.value || !newPassword.value || !requstPassword.value) {
        proxy.$fail('请输入完整信息');
        return
    }

    if (oldPassword.value === newPassword.value) {
        proxy.$fail('新密码不能与旧密码相同');
        return
    }
    if (newPassword.value !== requstPassword.value) {
        proxy.$fail('两次密码输入不一致');
        return
    }

    const data = {
        oldPassword: oldPassword.value,
        newPassword: newPassword.value,
        requstPassword: requstPassword.value,
        id: user.id,
    }

    const res = await proxy.$http.post({
        url: '/user/editpassword',
        params: data
    })
    if (res.code == 1) {
        proxy.$success('修改成功');
        setTimeout(() => { proxy.$router.push('/'); }, 1500);
    } else {
        proxy.$fail(res.msg);
    }
};

// 鼠标移动跟踪 - 用于光效跟随
onMounted(() => {
    const container = document.querySelector('.password-container');

    // 初始化光效位置
    floatingLightPos.x = window.innerWidth / 2;
    floatingLightPos.y = window.innerHeight / 2;
    floatingLightOpacity.value = 0.3;

    // 鼠标移动跟踪
    container.addEventListener('mousemove', (e) => {
        // 计算相对容器的位置
        const rect = container.getBoundingClientRect();
        floatingLightPos.x = e.clientX - rect.left;
        floatingLightPos.y = e.clientY - rect.top;

        // 鼠标移动时增强光效
        floatingLightOpacity.value = 0.5;
        clearTimeout(window.lightFadeTimeout);
        window.lightFadeTimeout = setTimeout(() => {
            floatingLightOpacity.value = inputStates.focusedIndex !== -1 ? 0.6 : 0.3;
        }, 1000);
    });

    // 创建背景粒子
    createBackgroundParticles();
});

// 创建背景粒子效果
const createBackgroundParticles = () => {
    const container = document.querySelector('.floating-elements');
    if (!container) return;

    // 创建20个随机粒子
    for (let i = 0; i < 20; i++) {
        const particle = document.createElement('div');
        particle.className = 'bg-particle';
        particle.style.cssText = `
      width: ${Math.random() * 10 + 2}px;
      height: ${Math.random() * 10 + 2}px;
      left: ${Math.random() * 100}%;
      top: ${Math.random() * 100}%;
      background: rgba(255, 255, 255, ${Math.random() * 0.3 + 0.1});
      border-radius: ${Math.random() > 0.5 ? '50%' : '0'};
      animation: float ${Math.random() * 20 + 10}s linear infinite;
      animation-delay: ${Math.random() * 5}s;
      transform: translateY(120vh);
      box-shadow: 0 0 ${Math.random() * 15 + 5}px rgba(255, 255, 255, 0.6);
    `;
        container.appendChild(particle);
    }
};
</script>

<style scoped>
/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    /* 全局光效滤镜 */
    filter: drop-shadow(0 0 15px rgba(106, 17, 203, 0.15));
}

/* 页面容器 */
.password-container {
    padding: 4rem 2rem 2rem;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    max-width: 500px;
    margin: 0 auto;
    /* 鼠标跟踪容器 */
    cursor: default;
}

/* 背景装饰 */
.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(106, 17, 203, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(37, 117, 252, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(19, 194, 194, 0.1) 0%, transparent 60%);
    z-index: -2;
    animation: bgPulse 20s ease-in-out infinite;
}

/* 背景粒子容器 */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

/* 背景粒子动画 */
@keyframes float {
    0% {
        transform: translateY(120vh) translateX(0) rotate(0deg);
    }

    50% {
        transform: translateY(-50vh) translateX(50px) rotate(180deg);
    }

    100% {
        transform: translateY(-120vh) translateX(-50px) rotate(360deg);
    }
}

/* 标题样式 */
.title-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 3rem;
    padding: 1rem;
}

.page-title {
    color: white;
    font-size: 2.2rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(106, 17, 203, 0.4),
        0 0 30px rgba(37, 117, 252, 0.3);
    letter-spacing: 2px;
    animation: titleFloat 6s ease-in-out infinite;
}

/* 标题发光效果 */
.title-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(106, 17, 203, 0.3) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 1;
    animation: glowPulse 4s ease-in-out infinite;
}

/* 输入框样式 - 保持原有 */
.input-password {
    background: linear-gradient(135deg, rgba(255, 236, 236, 0.55), rgba(101, 212, 239, 0.38));
    border-radius: 2.5rem;
    margin: 1.5rem auto;
    height: 4.5rem;
    font-size: 1.1rem;
    text-align: center;
    line-height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 -2px 8px rgba(255, 255, 255, 0.05),
        inset 0 2px 8px rgba(255, 255, 255, 0.05),
        inset 0 -2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    color: white;
}

.input-password:focus-within {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.3),
        0 -4px 16px rgba(255, 255, 255, 0.08),
        inset 0 4px 12px rgba(255, 255, 255, 0.08),
        inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    /* 聚焦时添加额外光效 */
    animation: inputFocus 0.5s ease-out;
}

/* 输入框底部装饰线 */
.input-password::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #6a11cb, #2575fc, #13c2c2);
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.input-password:focus-within::after {
    width: 100%;
}

/* 输入框标签样式 */
.input-password .van-field__label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-right: 0.5rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* 输入框内部样式 */
.input-password .van-field__control {
    color: white;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-align: center;
    padding: 0.5rem 0;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* 占位符文本样式 */
.input-password .van-field__control::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    letter-spacing: 1px;
}

/* 输入框内边距 */
.input-password .van-field__body {
    padding: 0 1.5rem;
}

/* 不同输入框色调变化 */
.input-password:nth-child(1):focus-within::after {
    background: linear-gradient(90deg, #6a11cb, #a855f7);
}

.input-password:nth-child(2):focus-within::after {
    background: linear-gradient(90deg, #2575fc, #3b82f6);
}

.input-password:nth-child(3):focus-within::after {
    background: linear-gradient(90deg, #13c2c2, #06b6d4);
}

/* 提交按钮容器 */
.button-container {
    margin: 3rem auto 2rem;
    text-align: center;
    position: relative;
}

/* 提交按钮样式 */
.submit-btn {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 3rem;
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(106, 17, 203, 0.4),
        0 8px 30px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    z-index: 1;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(106, 17, 203, 0.5),
        0 12px 40px rgba(37, 117, 252, 0.4);
    background: linear-gradient(135deg, #7b2ffd 0%, #3a86ff 100%);
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #6a11cb, #2575fc, #13c2c2);
    z-index: -1;
    border-radius: 3.2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.submit-btn:hover::before {
    opacity: 1;
    animation: btnGlow 2s ease-in-out infinite;
}

/* 按钮点击特效 */
.btn-active {
    animation: btnClick 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 悬浮光效 */
.floating-light {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 17, 203, 0.2) 0%, rgba(37, 117, 252, 0.1) 50%, transparent 80%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease, transform 0.2s ease-out;
    transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: screen;
    box-shadow:
        0 0 60px rgba(106, 17, 203, 0.3),
        0 0 120px rgba(37, 117, 252, 0.2);
    /* 光效呼吸动画 */
    animation: lightBreath 8s ease-in-out infinite;
}

/* 光效呼吸动画 */
@keyframes lightBreath {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 60px rgba(106, 17, 203, 0.3),
            0 0 120px rgba(37, 117, 252, 0.2);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 80px rgba(106, 17, 203, 0.4),
            0 0 160px rgba(37, 117, 252, 0.3);
    }
}

/* 输入框聚焦动画 */
@keyframes inputFocus {
    0% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 0 rgba(106, 17, 203, 0),
            inset 0 4px 12px rgba(255, 255, 255, 0.08),
            inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    }

    50% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(106, 17, 203, 0.6),
            inset 0 4px 12px rgba(255, 255, 255, 0.08),
            inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    }

    100% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 0 rgba(106, 17, 203, 0),
            inset 0 4px 12px rgba(255, 255, 255, 0.08),
            inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* 标题浮动动画 */
@keyframes titleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* 标题发光脉冲动画 */
@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* 按钮发光动画 */
@keyframes btnGlow {

    0%,
    100% {
        filter: blur(10px);
        background-position: 0% 50%;
    }

    50% {
        filter: blur(15px);
        background-position: 100% 50%;
    }
}

/* 按钮点击动画 */
@keyframes btnClick {
    0% {
        transform: scale(1);
        box-shadow:
            0 8px 25px rgba(106, 17, 203, 0.5),
            0 12px 40px rgba(37, 117, 252, 0.4);
    }

    50% {
        transform: scale(0.95);
        box-shadow:
            0 4px 15px rgba(106, 17, 203, 0.4),
            0 8px 30px rgba(37, 117, 252, 0.3);
    }

    100% {
        transform: scale(1);
        box-shadow:
            0 8px 25px rgba(106, 17, 203, 0.5),
            0 12px 40px rgba(37, 117, 252, 0.4);
    }
}

/* 背景脉冲动画 */
@keyframes bgPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}
</style>
